<template>
    <div class="blog-header">
        <div class="blog-h-wrap">
            <h1>腾</h1>
            <div class="user">
                <div class="icon" v-if="this.$store.state.name"  @click="remove">
                    <span>欢迎登陆! @</span>
                    {{this.$store.state.name}}
                    <div class="remove">退出登录</div>
                </div>
                <div class="info" v-else><span class="iconfont" @click="$router.push('/auth/login')">&#xe60f;</span></div>
            </div>
            <ul class="title-list" :class='"list"+whichActive'>
                <li><router-link to="/about">关于</router-link></li>
                <li><router-link to="/diary">日记</router-link></li>
                <li><router-link to="/message">留言</router-link></li>
                <li><router-link to="/article">博客</router-link></li>
                <li><router-link to="/">首页</router-link></li>
            </ul>
            <div class="line" @click="changeShow">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations,mapState} from "vuex"
export default {
    name:"blogHeader",
    data(){
        return {
            routerList:["/about","/diary","/message","/article/arContent","/",]
        }
    },
    computed: {
        ...mapState(["isShow"]),
        whichActive(){
            let index=this.routerList.indexOf(this.$route.path)
            return index+1
        }
    },
    methods: {
        ...mapMutations(["changeisShow"]),
        changeShow(){
            if(!this.isShow){
                this.changeisShow(true)
            }else{
                 this.changeisShow(false)
            }
            console.log(this.isShow)
        },
        remove(){
            sessionStorage.removeItem("token")
            sessionStorage.removeItem("name")
            setTimeout(()=>{
                window.location.reload()
            },0)
        }
    },
}
</script>

<style lang="less" scoped>
.blog-header{
    position: sticky;
    top:0;
    left:0;
    z-index:999;
    width:100%;
    height:60px;
    background:white;
    @media all and(max-width: 1000px) {
        .title-list{
            display:none;
        }
        .user{
            float: left !important;
        }
        h1{
            display: none;
        }
        .line{
            width:25px !important;
            opacity: 1 !important;
        }
    }
    .blog-h-wrap{
        width:80%;
        height:100%;
        margin:0 auto;
        line-height: 60px;
        .user{
            width:30px;
            height:30px;
            float: right;
            // background: red;
            margin-top:10px;
            line-height: 31px;
            .icon{
                position:relative;
                cursor: pointer;
                line-height: 20px;
                text-align: center;
                width:60px;
                &:hover .remove{
                    display:block;
                }
                .remove{
                    display:none;
                    position:absolute;
                    bottom: -55px;
                    left:5px;
                    width:80px;
                    height:40px;
                    background:rgb(0, 150, 136);
                    color:white;
                    font-size:12px;
                    line-height:40px;
                    border-radius:2px;
                    box-shadow: 2px 2px 5px -1px grey;
                    animation: remove .5s;
                    @keyframes remove {
                        0%{
                            transform: scale(.5);
                        }
                        100%{
                            transform: scale(1);
                        }
                    }
                    &::after{
                        position:absolute;
                        left:5px;
                        bottom:40px;
                        content: "";
                        width:0;
                        height:0;
                        border-left:10px solid transparent ;
                        border-right: 1px solid transparent;
                        border-bottom:12px solid rgb(0, 150, 136);
                    }
                }
                span{
                    font-size:10px;
                }
            }
            .info{
                margin-top: 6px;
                cursor: pointer;
                span{
                    font-size:30px;
                }
            }
        }
        .line{
            opacity: 0;
            width:0;
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            height:25px;
            float: right;
            margin-top:15px;
            transition:1s;
            span{
                display: inline-block;
                width:100%;
                height:3px;
                background:grey;
            }
        }
        h1{
            float:left;
            margin-left:40px;
            margin-top:5px;
            text-indent: -999px;
            width:60px;
            background:url("../../../assets/img/h.jpg") no-repeat ;
            background-size: 50px 50px;
        }
        .title-list{
            height:60px;
            float:right;
            margin-right:50px;
            li{
                float:right;
                margin-right:20px;
                width:100px;
                text-align: center;
                a{
                    position: relative;
                    color:black;
                    &::after{
                        position: absolute;
                        bottom:0;
                        left:0;
                        right:0;
                        margin:auto;
                        content:"";
                        width:0px;
                        height:2px;
                        background-color: #6bc30d;
                        transition:.3s;
                    }
                    &:hover{
                        color:#6bc30d;
                        &::after{
                            width:100%;
                        }
                    }
                }
            }
        }
        .list1 li:nth-child(1),.list2 li:nth-child(2),.list3 li:nth-child(3),.list4 li:nth-child(4){
            a{
                color:#6bc30d;
                &::after{
                    width:100%;
                }
            }
        }
    }
}
</style>